<!--
 * @Descripttion: 
 * @Author: yuxi
 * @Date: 2023-08-26 10:46:34
 * @LastEditors: yuxi
 * @LastEditTime: 2023-08-27 18:37:39
-->
<!--
 * @Descripttion: 
 * @Author: yuxi
 * @Date: 2022-09-15 14:58:04
 * @LastEditors: yuxi
 * @LastEditTime: 2023-01-10 17:14:19
-->
<template>
  <div class="map-container">
    <MiningMap       @ready="ready"
>
      <MiningTiandituLayer
        layerName="基础底图"
        :ak="key"
      ></MiningTiandituLayer>
      <MiningVectorLayer  :featureStyle="style"
        layerName="量算" 
      >
        <MiningLineString v-if="lineFeature" :feature="lineFeature"></MiningLineString>
        <MiningPolygon v-if="polygonFeature" :feature="polygonFeature"></MiningPolygon>
      </MiningVectorLayer>
      <MiningOverlay v-if="result.title" :position="result.position"> 
        <template #content>
          <div>{{result.title}}</div>
        </template>
      </MiningOverlay>
    </MiningMap>
    <div class="tools">
      <el-button size="mini" @click="startMeasure('length')">距离量算</el-button>
      <el-button size="mini" @click="startMeasure('area')">面积量算</el-button>

    </div>
  </div>
</template>

<script>
import MiningMap from 'mining-map/Map'
import MiningTiandituLayer from 'mining-map/Layers/TiandituLayer'
import MiningWMSLayer from 'mining-map/Layers/WMSLayer'
import { TiandituKey,CityCoordinates } from '@/config/config.js';
import MiningMeasureAction, {MeasureActionType} from 'mining-map/Actions/Measure'

import MiningVectorLayer from 'mining-map/Layers/VectorLayer'
import MiningOverlay from 'mining-map/Overlay/Overlay';
import MiningLineString from 'mining-map/Features/LineString';
import MiningPolygon from 'mining-map/Features/Polygon';

import { Style, Stroke as StrokeStyle, Icon } from 'ol/style';
import { Polygon } from 'ol/geom';
 
const style = {
  'fill-color': 'rgba(255, 255, 255, 0.2)',
  'stroke-color': '#ffcc33',
  'stroke-width': 2,
  'circle-radius': 7,
  'circle-fill-color': '#ffcc33',
}

export default {
  name: 'MeasureAction',
  title: '测量交互插件',
  parentTitle: '交互插件',
  components: {
    MiningMap,
    MiningTiandituLayer,

    MiningVectorLayer,
    MiningOverlay,
    MiningLineString,
    MiningPolygon
  },
  data () {
    
 
    return {
      key: TiandituKey,
      lineFeature: null, 
      polygonFeature: null,
      result: {
        title: '',
        position: []
      },
      style: new Style({
        stroke: new StrokeStyle({
          color: 'green',
          width: 2,
        })
      }),
      action: null
    }
  },
  methods: {
    ready ({map, vmap}) {
      console.log(map, vmap, MiningMeasureAction)
      const action = this.action = new MiningMeasureAction(map);
      action.on('tooltipChange', (evt) => {
        console.log('change', evt)
        this.result = evt.target 
      })
      action.on('measureEnd', this.measureEnd.bind(this))
      console.log(action)
      vmap.addActions(action)
      console.log(MeasureActionType)

      // action.start(MeasureActionType.Distance)
    },
    measureEnd(evt) {
        console.log('measureEnd', evt)
        if(evt.target.getGeometry() instanceof Polygon) {
            this.lineFeature = null
          this.polygonFeature = evt.target

        } else {
          this.polygonFeature = null
          this.lineFeature = evt.target

        }
      },
    startMeasure (evt) {
      this.action.start(evt == 'length'? MeasureActionType.Distance: MeasureActionType.Area)
    }
  }

}
</script>

<style lang="less">
body,
html {
  padding: 0;
  margin: 0;
}

.map-container {
  position: relative;
  width: 100%;
  height: 100vh;
  .coordinate {
    position: absolute;
    bottom: 0px;
    left: 0px;
    right: 0px;
    background-color: rgba(0, 0, 0, 0.2);
    color: #fff;
    padding: 5px;
  }
}
.tools {
  position: absolute; 
  left: 100px;
  top: 10px;
}
</style>